import React, {PureComponent} from 'react';
import NavigationFactory from '../../utils/navigationFactory';
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native';
import {TenThousandToStr} from '../../utils/utils';
import {GetSimilar} from '../../mode/similarCtr';
import {GetSwiper} from '../../mode/swiperCtr';
import AppConfig from '../../config/appConfig';
@NavigationFactory
class Popular extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      similarItems: [],
    };
  }

  componentDidMount() {
    this.onGetMoreSimilar(this.props.item);
  }

  onGetMoreSimilar = (item) => {
    GetSimilar(item).then((similars) => {
      var data = similars.data.concat(this.state.similarItems);
      console.log(data);
      this.setState({
        similarItems: data,
      });
    });
  };

  componentWillUnmount() {}

  render() {
    var dataList = this.state.similarItems;
    return (
      <View>
        <View style={styles.contain_view}>
          <View style={styles.contain_list}>
            {dataList.map((item, index) => {
              var imageSrc = item.Pic;
              if (imageSrc.indexOf('http') == -1) {
                imageSrc = 'https:' + imageSrc;
              }

              return (
                <TouchableOpacity
                  style={styles.item}
                  activeOpacity={0.8}
                  onPress={() => {
                    GetSwiper(item).then((res) => {
                      const navigation = this.props.navigation;
                      navigation.push('detailPage', {item: res});
                    });
                  }}>
                  <View style={styles.itemCenter} key={index}>
                    {/*图片*/}
                    <Image style={styles.img} source={{uri: imageSrc}} />
                    <View style={styles.backgroundItem} c>
                      {/*/!*描述*!/*/}
                      <Text style={{}}>
                        <Text style={styles.typeFrom}>
                          {AppConfig.GetTypeStr(item.TypeFrom)}
                        </Text>
                        {item.ShortTitle === '' ? item.Title : item.ShortTitle}
                      </Text>

                      <View style={styles.center}>
                        <Text style={styles.truePrice}>
                          原价:￥{item.Price}
                        </Text>
                        <Text style={styles.num}>
                          月销:{TenThousandToStr(item.SaleCount)}
                        </Text>
                      </View>

                      <View style={styles.center}>
                        <Text style={styles.redNum}>
                          卷后:￥{item.EndPrice}
                        </Text>
                        <Text style={styles.redJuan}>
                          卷:￥{item.CouponMoney}
                        </Text>
                      </View>
                    </View>
                  </View>
                </TouchableOpacity>
              );
            })}
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  contain_view: {
    marginTop: 20,
    backgroundColor: '#ffffff',
  },
  contain_list: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: '100%',
    justifyContent: 'center',
  },
  item: {
    display: 'flex',
    width: '49%',
    height: 330,
    backgroundColor: '#fdfdfd',
    justifyContent: 'center',
    alignItems: 'center',
  },

  itemCenter: {
    display: 'flex',
    width: '98%',
    height: 320,
    flexDirection: 'column',
    backgroundColor: '#fd1a18',
  },
  img: {
    width: '100%',
    height: 240,
    backgroundColor: '#f4f4f4',
  },
  backgroundItem: {
    width: '100%',
    height: 140,
    backgroundColor: '#fbdb9e',
  },
  truePrice: {
    color: '#666666',
    textDecorationLine: 'line-through',
    fontSize: 12,
  },
  typeFrom: {
    height: 35,
    width: 100,
    backgroundColor: '#e20b22',
    borderRadius: 10,
    flexDirection: 'row',
    fontSize: 18,
    color: '#dddddd',
  },
  redNum: {
    color: '#e20009',
    fontSize: 16,
  },
  redJuan: {
    fontSize: 16,
    backgroundColor: '#e20b22',
    borderRadius: 10,
    flexDirection: 'row',
    color: '#dddddd',
    paddingLeft: 5,
    paddingRight: 5,
  },

  center: {
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
});
export default Popular;
